import PropTypes from 'prop-types';
import React from 'react';
import { Link } from 'react-router-dom';
import Dialog from '@kuiper-components/dialog';
import Button from '@kuiper-components/button';
import { useQuery, gql } from '@apollo/client';
import Helper from '../../Helper';
import {
	SECURITY_EVENT_TYPE_MAP,
	FREQ_UNIT_MAP,
	INFORM_OPTIONS,
} from '../../../../common/constants';
import s from './style.module.css';
import CollectFrequency from '../../CollectFrequency';
const TRIGGER_TYPE = { schedule: '周期性', manual: '自定义单次' };
const ALERT_GROUP_QUERY = gql`
	{
		AlertGroupMany {
			isDefault
			receiverIds
			name
			_id
		}
	}
`;
function SecurityEvent({
	className,
	children,
	host,
	triggerType,
	taskSettings,
	jobId,
	isLatestTask,
	note,
	alertSettings,
}) {
	const [visible, setVisible] = React.useState(false);
	const [groupData, setGroupData] = React.useState([]);
	const { data: alertData } = useQuery(ALERT_GROUP_QUERY);
	const groupArr = [];
	const notigicationArr = [];
	alertSettings &&
		INFORM_OPTIONS.forEach(e => {
			alertSettings.notification[e.value] && notigicationArr.push(e.label);
		});
	React.useEffect(() => {
		if (alertSettings && alertData) {
			alertData.AlertGroupMany.forEach(e => {
				if (alertSettings.alertGroupIds.includes(e._id)) {
					groupArr.push(e.name);
				}
			});
		}
		setGroupData(groupArr);
	}, [alertData]);
	return (
		<>
			<Button
				link
				primary
				className={className}
				onClose={() => setVisible(false)}
				onClick={() => setVisible(true)}
			>
				{children}
			</Button>
			<Dialog
				title={
					<div className={s.dialogtitle}>
						<span>{children}</span>
						<Helper
							overlayClassName={s.helpTooltip}
							overlay={
								<>
									<p>以下配置为该资产当次任务检测时设置的参数。</p>
									<p>
										如需查看最新周期性参数配置，请前往“资产列表-管理-周期配置”
									</p>
								</>
							}
							placement="right"
						/>
					</div>
				}
				visible={visible}
				className={s.modal}
				onClose={() => setVisible(false)}
			>
				<table className={s.currentSetting}>
					<tr>
						<td className={s.label}>资产名称:</td>
						<td>{note}</td>
					</tr>
					<tr>
						<td className={s.label}>资产地址:</td>
						<td>{host}</td>
					</tr>
					<tr>
						<td className={s.label}>监测方式:</td>
						<td>
							<span>{triggerType ? TRIGGER_TYPE[triggerType] : ''}</span>
						</td>
					</tr>
					<tr>
						<td className={s.label}>监测内容:</td>
						<td>
							<span>
								{(taskSettings?.collect?.plugins || [])
									.map(x => SECURITY_EVENT_TYPE_MAP[x])
									.join('、')}
							</span>
						</td>
					</tr>
					{(triggerType === 'schedule' ||
						triggerType === 'scheduleIncrement') && (
						<tr>
							<td className={s.label}>监测频率:</td>
							<td>
								<CollectFrequency
									viewmode
									value={taskSettings?.interval}
									unitMap={FREQ_UNIT_MAP}
								/>
							</td>
						</tr>
					)}
					{/* <tr>
						<td className={s.label}>监测速度:</td>
						<td>
							<span>{SPEED_LEVEL_MAP[taskSettings?.collect?.speed]}</span>
						</td>
					</tr> */}
					<tr>
						<td className={s.label}>监测深度:</td>
						<td>
							<span>{taskSettings?.collect?.depth || 0}</span>层
						</td>
					</tr>
					<tr>
						<td className={s.label}>监测最大URL数:</td>
						<td>
							<span>{taskSettings?.collect?.maxPage}</span>页
						</td>
					</tr>
					{alertSettings && (
						<>
							<tr>
								<td className={s.label}>通知对象：</td>
								<td className={s.value}>
									{groupData[0]
										? groupData.map(e => {
												return (
													<span className={s.hl2} key={e}>
														{e}
													</span>
												);
										  })
										: '--'}
								</td>
							</tr>
							<tr>
								<td className={s.label}>通知类型：</td>
								<td className={s.value}>
									{notigicationArr[0]
										? notigicationArr.map((e, i) => {
												return (
													<span key={e}>
														{e}
														{i === notigicationArr.length - 1 ? '' : '、'}
													</span>
												);
										  })
										: '--'}
								</td>
							</tr>
						</>
					)}
				</table>
				<div className={s.btnContainer}>
					{jobId &&
						isLatestTask &&
						(triggerType === 'schedule' ||
							triggerType === 'scheduleIncrement') && (
							<Link
								className={s.btn}
								to={`/job/${jobId}/securityEvent/securityEvent`}
							>
								<Button
									size="small"
									className={s.btn}
									onClick={() => setVisible(false)}
								>
									前往修改
								</Button>
							</Link>
						)}
					<Button
						size="small"
						className={s.btn}
						primary
						onClick={() => setVisible(false)}
					>
						取消
					</Button>
				</div>
			</Dialog>
		</>
	);
}

SecurityEvent.propTypes = {
	TRIGGER_TYPE: PropTypes.object,
	className: PropTypes.string,
	children: PropTypes.node,
	host: PropTypes.string,
	triggerType: PropTypes.string,
	taskSettings: PropTypes.object,
	jobId: PropTypes.string,
	isLatestTask: PropTypes.bool,
	note: PropTypes.string,
	alertSettings: PropTypes.any,
};

SecurityEvent.defaultProps = {
	className: '',
	isLatestTask: false,
	note: '',
};

export default SecurityEvent;
